<template>
  <div class="footer">
    <div
      :class="{footer__item: true,footer__active: item.to.name === componName}"
      v-for="item in list"
      :key="item.icon"
    >
      <router-link :to="item.to">
        <div class="iconfont" v-html="item.icon"></div>
        <div class="footer__tlite">{{item.tlite}}</div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Footer',
  props: ['componName'],
  setup () {
    const list = [
      {
        icon: '&#xe89c;',
        tlite: '首页',
        to: { name: 'Home' }
      },
      {
        icon: '&#xe607;',
        tlite: '购物车',
        to: { name: 'CartList' }
      },
      {
        icon: '&#xe655;',
        tlite: '订单',
        to: { name: 'Order' }
      },
      {
        icon: '&#xe662;',
        tlite: '我的',
        to: { name: 'MyMess' }
      }
    ]

    return { list }
  }
}
</script>

<style lang="scss">
.footer {
  display: flex;
  position: fixed;
  box-sizing: border-box;
  padding: 0 0.18rem;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.49rem;
  background: #ffffff;
  border-top: .01rem solid #f1f1f1;
  &__item {
    flex: 1;
    text-align: center;
    a {
      color: #333333;
      text-decoration: none;
    }
    .iconfont {
      font-size: 0.18rem;
      padding: 0.07rem 0 0.02rem 0;
    }
  }
  &__tlite {
    font-size: 0.2rem;
    transform: scale(0.44);
    transform-origin: center top;
  }
  &__active {
    a {
      color: #1fa4fc;
      text-decoration: none;
    }
  }
}
</style>
